<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例7</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
        #center {
            width: 232px;
            margin: 0 auto;
        }
        
        #imgdiv {
            float: right;
            background-image: url(.);
        }
        
        #d2 {
            width: 179px;
            height: 67px;
            background-image: url(./res07/icon.gif);
            text-align: center;
            line-height: 67px;
            display: none;
            padding: 0;
            font-size: 10px;
            margin: 0 auto;
            position: relative;
        }
        
        .a1 {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(./res07/star.png);
        }
        /* //变红 */
        
        .a2 {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-image: url(./res07/star.png);
            background-position-y: 100%;
        }
    </style>
</head>

<body>
    <div id="center">
        <label>给出你的评价吧</label>
        <div id="imgdiv">
            <a class="a1" href="javascript:click(1)" id="star1"></a>
            <a class="a1" href="javascript:click(2)" id="star2"></a>
            <a class="a1" href="javascript:click(3)" id="star3"></a>
            <a class="a1" href="javascript:click(4)" id="star4"></a>
            <a class="a1" href="javascript:click(5)" id="star5"></a>
        </div>
    </div>

    <div id="d2"></div>
</body>

</html>
<script>
    //星星评价功能
    var check = 0; //该变量是记录当前选择的评分
    /*get()是鼠标点击在星星上的效果*/
    function get(param) {
        if (param == 1) {
            $("#star1").attr("class", "a2"); //第一颗星星亮起来
            $("#star2").attr("class", "a1");
            $("#star3").attr("class", "a1");
            $("#star4").attr("class", "a1");
            $("#star5").attr("class", "a1");
            $("#d2").css("left", "7px");
            $("#d2").css("display", "block");
            $("#d2").empty();
            $("#d2").append("非常不满意！");
        } else if (param == 2) {
            $("#star1").attr("class", "a2");
            $("#star2").attr("class", "a2");
            $("#star3").attr("class", "a1");
            $("#star4").attr("class", "a1");
            $("#star5").attr("class", "a1");
            $("#d2").css("left", "33px");
            $("#d2").css("display", "block");
            $("#d2").empty();
            $("#d2").append("有点不满意");
        } else if (param == 3) {
            $("#star1").attr("class", "a2");
            $("#star2").attr("class", "a2");
            $("#star3").attr("class", "a2");
            $("#star4").attr("class", "a1");
            $("#star5").attr("class", "a1");
            $("#d2").css("left", "59px");
            $("#d2").css("display", "block");
            $("#d2").empty();
            $("#d2").append("还好");
        } else if (param == 4) {
            $("#star1").attr("class", "a2");
            $("#star2").attr("class", "a2");
            $("#star3").attr("class", "a2");
            $("#star4").attr("class", "a2");
            $("#star5").attr("class", "a1");
            $("#d2").css("left", "85px");
            $("#d2").css("display", "block");
            $("#d2").empty();
            $("#d2").append("满意");
        } else if (param == 5) {
            $("#star1").attr("class", "a2");
            $("#star2").attr("class", "a2");
            $("#star3").attr("class", "a2");
            $("#star4").attr("class", "a2");
            $("#star5").attr("class", "a2");
            $("#d2").css("left", "111px");
            $("#d2").css("display", "block");
            $("#d2").empty();
            $("#d2").append("非常满意！");
        }
    }
    /*记录打分*/
    function click(param) {
        check = param; //记录当前打分
        //调用方法
        get(check); //设置星星数
    }
</script>